<template>
  <div class="contentBox">
    <ul class="side">
      <li v-for="item in goodsArr" :key="item.name">
        <a :href="'#'+ item.name">{{item.name}}</a>
      </li>
    </ul>
    <div class="right">
    <div v-for="item1 in goodsArr" :key="item1.name">
        <p class="goodsBigName" :id="item1.name">
          {{item1.name}}
        </p>
        <ul>
        <li v-for="item in item1.foods">
          <img :src="item.image" alt="">
          <div class="text">
            <p class="goodsName">{{item.name}}</p>
            <p>
              <span>月售{{item.sellCount}}</span>
              <span>好评率{{item.rating}}%</span>
            </p>
            <p>￥{{item.price}}</p>
          </div>
          <span class="jia">+</span>
        </li>
        </ul>
      </div>
      
    </div>
  </div>
</template>
<script>
 import axios from "axios";
 export default {
       data(){
        return{
            goodsArr:[],
        };
       },
       created(){
        this.getData();
        
       },
       methods:{
        async getData(){
            const data = await axios.get('http://localhost:3009/goods');
            this.goodsArr = [...data.data.goods];
            this.goodsArr.forEach((item)=>{
              console.log(item);
              const {foods} = item;
              console.log(foods)
              // this.foodsArr.push(...foods);
              console.log(this.foodsArr)
            })
        },
       }
    }
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
html,body{
  height: 100%;
}
ul,ol,li{
  list-style: none;
}
a,a.active{
  text-decoration: none;
  color: gray;
}
.contentBox{
  display: flex;
  width: 1000px;
  /* height: 1000px; */
}
.contentBox>.side{
  /* width: 160px; */
  height: 600px;
  background:gainsboro;
  align-items: center;
  overflow:auto;
}
.contentBox>.side>li{
  width: 160px;
  height: 100px;
  border-bottom: 1px solid gray;
  text-align: center;
  line-height: 100px;
  font-size: 18px;
}
.contentBox>.side>li:hover{
  background: white;
}
.contentBox>.right{
  flex: 1;
  /* background: pink; */
  height: 600px;
  overflow: auto;
}
::-webkit-scrollbar{
  display: none;
}
.contentBox>.right li{
  border-bottom: 1px solid gray;
  display: flex;
  padding: 10px;
}
.contentBox>.right li>.text{
  width: 300px;
}
.contentBox>.right li>.text>p{
  line-height: 34px;
}
.contentBox>.right li>.text>p:nth-child(1){
  font-size: 18px;
}
.contentBox>.right li>.text>p:nth-child(2){
   color: gray;
   font-size: 14px;
}
.contentBox>.right li>.text>p:nth-child(2)>span{
  margin-right: 10px;
}
.contentBox>.right li>.text>p:nth-child(3){
   color: red;
   font-size: 18px;
}
img{
  display: block;
  width: 100px;
  height: 100px;
}
.jia{
  display: inline-block;
  width: 25px;
  height: 25px;
  background:blue;
  text-align: center;
  line-height: 25px;
  border-radius: 50%;
  font-size: 18px;
  color: white;
  margin-top: 80px;
  margin-left: 50px;
}
.goodsBigName{
  height: 60px;
  background: gainsboro;
  border-left: 2px solid gray;
  line-height: 60px;
  font-size: 18px;
  color: gray;
  text-indent: 0.5em;
}
</style>